এইচটিএমএল পেজ বা এলিমেন্টের ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টি ব্যবহার করা হয়।

সিএসএস ব্যাকগ্রাউন্ডসংক্রান্ত প্রোপার্টিসমূহঃ

• background-color
• background-image
• background-position
• background-repeat
• background-attachment

এক নজরে সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টিসমূহ

background

একটি ডিক্লেয়ারেশনের মধ্যে সকল ব্যাকগ্রাউন্ড প্রোপার্টি সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-attachment

পেজের ব্যাকগ্রাউন্ড ইমেজ ফিক্সড থাকবে নাকি স্ক্রল হবে তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-color

একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড কালার সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-image

একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড ইমেজ সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-position

ব্যাকগ্রাউন্ড ইমেজের পজিশন সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-repeat

ব্যাকগ্রাউন্ড ইমেজ কিভাবে রিপিট হবে, তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-color

একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার সেট করার জন্য background-color প্রোপার্টিটি ব্যবহার করা হয়।

search সিএসএস দিয়ে একটি সম্পূর্ণ পেজের ব্যাকগ্রাউন্ড কালার সেট করার জন্য নিচের পদ্ধতি অবলম্বন করা হয়।

kt_satt_skill_example_id=293

search সিএসএস দিয়ে কালার করতে অধিকাংশ ক্ষেত্রেই নিম্নোক্ত পদ্ধতিসমূহ ব্যবহৃত হয়ঃ

• কালারের নাম ব্যবহার করে। যেমন- "red"
• HEX ভ্যালু ব্যবহার করে। যেমন- "#ff0000"
• RGB ভ্যালু ব্যবহার করে। যেমন- "rgb(255,0,0)"

সম্ভাব্য সমস্ত কালার ভ্যালুর তালিকা এক নজরে দেখার জন্য সিএসএস কালার ভ্যালু পেজে ভিজিট করুন।

নিচের উদাহরণে < h1>, < p> এবং < div> এলিমেন্টের ব্যাকগ্রাউন্ড কালারসমূহ ভিন্ন ভিন্ন ভাবে সেট করা হয়েছেঃ

kt_satt_skill_example_id=299

background-image

এলিমেন্টের ব্যাকগ্রাউন্ডে ছবি বা ইমেজ সেট করার জন্য background-image প্রোপার্টিটি ব্যবহার করা হয়।

সম্পূর্ণ এলিমেন্টকে কাভার করার জন্য ডিফল্টভাবে ইমেজটির পূনরাবৃত্তি ঘটে।

একটি পেজে কিভাবে ব্যাকগ্রাউন্ড ইমেজ সেট করা হয় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ

kt_satt_skill_example_id=302

ব্যাকগ্রাউন্ড ইমেজ এবং টেক্সট কালারের সঠিক সমন্বয় না হলে লেখা পড়তে সমস্যা হয় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ

kt_satt_skill_example_id=304

বিঃদ্রঃ যখন ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করবেন, তখন টেক্সটের কালার এবং এমন ইমেজ ব্যবহার করবেন যেন টেক্সট পড়তে সমস্যা না হয়।

background-repeat: repeat-x; & repeat-y;

background-image প্রোপার্টি ডিফল্টভাবে একটি ইমেজকে অনুভূমিক এবং উল্লম্ব উভয় দিকেই পুনরাবৃত্তি করে।

কিছু ইমেজকে হয় অনুভূমিকভাবে আর নয় উল্লম্বভাবে পুনরাবৃত্তি করা উচিত, তা না হলে এগুলো দেখতে অদ্ভুত লাগবে। যেমনঃ

kt_satt_skill_example_id=305

বিঃদ্রঃ স্পেসিফিকভাবে নির্দিষ্ট করে না দেয়া হলে ব্যাকগ্রাউন্ড ইমেজ x এবং y উভয় অক্ষেই পুনরাবৃত্তি করবে।

শুধুমাত্র অনুভূমিকভাবে ইমেজ রিপিট করার জন্য background-repeat: repeat-x; ব্যবহার করা হয়।

kt_satt_skill_example_id=306

পরামর্শঃ একইভাবে ইমেজকে উলম্বভাবে রিপিট করার জন্য background-repeat: repeat-y; সেট করুন।

background-position প্রোপার্টি এবং no-repeat ভ্যালুর ব্যবহার

আপনি যদি ব্যাকগ্রাউন্ড ইমেজকে শুধুমাত্র একবার দেখাতে চান তাহলে background-repeat প্রোপার্টির ভ্যালু no-repeat সেট করুনঃ

kt_satt_skill_example_id=309

উপরোক্ত উদাহরণে, টেক্সট এবং ব্যাকগ্রাউন্ড ইমেজকে একই জায়গায় দেখানো হয়েছে। আপনি চাইলে ইমেজের পজিশন পরিবর্তন করতে পারেন যাতে ইহা টেক্সটসমূহ পড়তে কোনো সমস্যা না করে।

background-position প্রোপার্টি দ্বারা ইমেজের পজিশন পরিবর্তন করা হয়।

kt_satt_skill_example_id=312

background-attachment

ব্যাকগ্রাউন্ড ইমেজটি ব্যাকগ্রাউন্ডে ফিক্সড থাকবে নাকি স্ক্রলের সাথে নড়বে সেটি নির্ধারণ করার জন্য background-attachment প্রোপার্টিটি ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=317

background - শর্টহ্যান্ড প্রোপার্টি

কোড সংক্ষিপ্ত করার জন্য সকল ব্যাকগ্রাউন্ড প্রোপার্টিকে একটি সিঙ্গেল প্রোপার্টির মধ্যে লেখা সম্ভব। একে শর্টহ্যান্ড প্রোপার্টি বলে

background হলো ব্যাকগ্রাউন্ডের জন্য শর্টহ্যান্ড প্রোপার্টিঃ

kt_satt_skill_example_id=322

যখন শর্টহ্যান্ড প্রোপার্টি ব্যবহার করবেন তখন নিচের ক্রম ঠিক রাখুনঃ

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

অন্য সবগুলো প্রোপার্টির ক্রম ঠিক থাকলে একটি প্রোপার্টির মান অনুপস্থিত থাকলেও কোন সমস্যা হবে না।